<template>
	<view class="container">
		<view class="search">
		<uni-search-bar
			v-model="pagination.value"
			placeholder="请输入搜索内容"
			@confirm="search"
			@cancel="cancel"
			@clear="clear"
		/>
		</view>
		<view class="uin-table">
				<uni-table
					ref="table"
					border stripe 
					emptyText="暂无更多数据" 
					>
					<uni-tr>
						<uni-th align="left">操作</uni-th>
						<uni-th align="left">ID</uni-th>
						<uni-th align="left">标题</uni-th>
						<uni-th align="left">作者</uni-th>
						<uni-th align="left">创建时间</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in list" :key="index">
						<uni-td>
						<view class="uni-group">
							<button class="uni-button" @click="goDetailPage(item.id)" size="mini" type="primary">修改</button>
							<button class="uni-button" @click="delect(item)"size="mini" type="warn">删除</button>

						</view>
						</uni-td>
						<uni-td>{{ item.id}}</uni-td>
						<uni-td>{{ item.title}}</uni-td>	
						<uni-td>{{ item.author}}</uni-td>
						<uni-td>{{ item.createTime}}</uni-td>
							
					</uni-tr>
				</uni-table>
		</view>
		<view class="pagination">
			<uni-pagination 
			show-icon
			:total="pagination.total" 
			:pageSize="pagination.limit"
			:current="pagination.page"
			@change="change"
			/>
		</view>
	</view>
</template>

<script>
import { ref,reactive,onMounted} from 'vue'
import { getDemoPageList,getDemoDelect } from "@/apis/api"
import uinFun from "@/uilt/uinFun"

export default {
	components: {},	
	setup() {

		// 表格数据列表
		const list = ref([])
		// 分页数据和搜索数据
		const pagination = reactive({
			page: 1,// 当前页码
			limit: 10,// 每页显示条数
			total: 0, // 数据总条数
			key: 'title', // 搜索字段
			value: '' // 搜索关键词
		})
				
		// 加载数据方法
		const loadData = (pagination) => {
			getDemoPageList({
				page: pagination.page,
				limit: pagination.limit,
				key: pagination.key,
				value: pagination.value
			}).then(res => {
				list.value = res.data.data
				pagination.total = res.data.total
			 }).catch(err => {
				console.log(err)
				uinFun.setModal('错误提示', err)
			})
		}
		// 分页改变
		const change = (e) => {
			pagination.page = e.current
			loadData(pagination)
		}
		
		
		// 搜索方法
		const search = (e) => {		
			pagination.value = e.value
			pagination.page = 1
			loadData(pagination)
		}
		// 清空搜索
		const clear = () => {
			pagination.value = ''
		}
		// 取消搜索
		const cancel = () => {
			pagination.value = ''
			loadData(pagination)
		}


		const goDetailPage=(path)=> {
			const url = '/pages/uin/exit?id=' + path 
				uni.navigateTo({
					url: url
				})
		}
		const delect=(e)=> {
			uni.showModal({
				title: '删除提示',
				content: '确定要删除吗？',
				success: function (res) {
					if (res.confirm) {
						getDemoDelect({
							id: e.id
						}).then(res => {
							list.value = list.value.filter(item => item.id !== e.id)
							uinFun.setToast('删除成功')

						}).catch(err => {
							console.log(err)
							uinFun.setModal('错误提示', err)
						})
					}
				}
			})
			
		}

		// 挂载后执行
		onMounted(() => {
			loadData(pagination)
		})
		
		return {
			list,
			pagination,
			change,
			search,
			clear,
			cancel,
			goDetailPage,
			delect
		}
	},

	onLoad(option) {
		uinFun.setBarTitle('表格')
	}
	

}
</script>

<style lang="scss">
.pagination {
	margin-top: 20rpx;
}
.table {
	margin-top: 20rpx;
}
</style>
